var degToRad = Math.PI / 180;
var body = document.getElementsByTagName("html")[0];
var wid = body.clientWidth + 17;
var hei = Math.max(530, body.clientHeight - 10);
var cvs = document.getElementById("cvs");
cvs.height = hei;
cvs.width = wid;
var seasons = ["winter", "spring", "summer", "fall"];
var season = seasons[Math.floor(Math.random() * seasons.length)];
var ctx = cvs.getContext("2d");
function randomizeOpacity(r, g, b) {
  const diff = () =>
    Math.max(0, Math.min(255, 50 - Math.floor(Math.random() * 100)));
  // r += Math.max(0, Math.min(255, 50 - Math.floor(Math.random() * 100)));
  // g += Math.max(0, Math.min(255, 50 - Math.floor(Math.random() * 100)));
  // b += Math.max(0, Math.min(255, 50 - Math.floor(Math.random() * 100)));
  r += diff();
  g += diff();
  b += diff();
  var a = Math.random() * 0.6 + 0.4;
  return "rgba(" + r + "," + g + "," + b + "," + a + ")";
}
function makeLeaf(x, y, angle, newAngle) {
  branch(x, y, 0, 0, angle, 0, 1, newAngle, true);
}
function branch(x, y, thick, len, angle, iterations, i, a, leaf) {
  ctx.lineWidth = thick;
  ctx.lineCap = "round";
  ctx.strokeStyle = "saddlebrown";
  ctx.beginPath();
  ctx.moveTo(x, hei - y);
  i = i || 0;
  a = a || 0;
  leaf = leaf || false;
  if (leaf) {
    len = 5;
    ctx.lineWidth = 3;
    if (season === "spring") {
      //pink, green
      ctx.strokeStyle =
        Math.random() * 5 > 3
          ? randomizeOpacity(255, 192, 203)
          : randomizeOpacity(0, 128, 0);
    } else if (season === "summer") {
      //green
      ctx.strokeStyle = randomizeOpacity(0, 128, 0);
    } else if (season === "fall") {
      var t = "transparent";
      //orange, red, yellow
      var fallColors = [
        randomizeOpacity(255, 165, 0),
        randomizeOpacity(255, 0, 0),
        randomizeOpacity(255, 165, 0),
      ];
      ctx.strokeStyle =
        Math.random() * 15 < 13
          ? "transparent"
          : fallColors[Math.floor(Math.random() * fallColors.length)];
    } else {
      ctx.strokeStyle = "transparent";
    }

    //this is an actual thing.
    ctx.lineCap = "butt";
  }
  var newLen = i === 0 || leaf ? len : len * (0.5 + Math.random() * 0.6);
  var newA = i === 0 ? a : a + (4 * angle - Math.random() * 8 * angle);
  var dX = x + newLen * Math.sin(a * degToRad);
  var dY = y + newLen * Math.cos(a * degToRad);
  ctx.lineTo(dX, hei - dY);
  var it = 3 + Math.floor(Math.random() * iterations);
  if (!leaf && i >= it) {
    ctx.lineWidth = Math.min(1, ctx.lineWidth);
  }
  ctx.stroke();
  a += 10 - Math.random() * 20;
  if (!leaf && i < it) {
    var priority = Math.random() * 2 > 1 ? -1 : 1;
    branch(
      dX,
      dY,
      Math.max(0.2, thick * 0.7),
      len * 0.85,
      angle,
      iterations,
      i + 1,
      a + priority * angle
    );
    branch(
      dX,
      dY,
      Math.max(0.2, thick * 0.7),
      len * 0.85,
      angle,
      iterations,
      i + 1,
      a - priority * angle
    );
    if (Math.random() * 2 > 1) {
      branch(
        x + (dX - x) * 0.4,
        y + (dY - y) * 0.4,
        Math.max(0.2, thick * 0.7),
        len * 0.85,
        angle,
        iterations,
        i + 1,
        a
      );
    }
    if (i > 1 && Math.random() * 2 > 1) {
      makeLeaf(x + (dX - x) / 2, y + (dY - y) / 2, angle, 2 * (a + angle));
    }
    if (i > 1 && Math.random() * 2 > 1) {
      makeLeaf(x + (dX - x) / 2, y + (dY - y) / 2, angle, 2 * (a - angle));
    }
  } else if (!leaf) {
    makeLeaf(dX, dY, angle, 2 * a + angle);
    makeLeaf(dX, dY, angle, 2 * a - angle);
    makeLeaf(dX, dY, angle, a);
  }
}
function newTreeButton(color, text) {
  ctx.lineWidth = 1;
  ctx.strokeStyle = "black";
  ctx.fillStyle = color;
  ctx.rect(5, 5, 130, 50);
  ctx.fill();
  ctx.stroke();
  ctx.font = "bold 14pt sans-serif";
  ctx.fillStyle = "black";
  ctx.fillText(text, 25, 35);
}
ctx.fillStyle = "skyblue";
ctx.lineWidth = 0;
ctx.fillRect(0, 0, wid, hei);
ctx.fillStyle = "limegreen";
ctx.fillRect(0, hei - 20, wid, 20);
function checkFall() {
  if (season === "fall") {
    var i;
    for (i = 0; i < 500; i++) {
      ctx.beginPath();
      var colors = [
        randomizeOpacity(255, 165, 0),
        randomizeOpacity(255, 0, 0),
        randomizeOpacity(255, 165, 0),
      ];
      ctx.strokeStyle = colors[Math.floor(Math.random() * colors.length)];
      ctx.lineWidth = 3;
      var x = Math.random() * wid;
      var y = hei - Math.random() * 20;
      ctx.moveTo(x, y);
      ctx.lineTo(x + 5, y);
      ctx.stroke();
    }
  }
}
checkFall();
branch(
  wid / 2,
  5,
  15,
  100,
  20 + Math.random() * 5,
  15 + Math.floor(Math.random() * 5)
);

newTreeButton("gainsboro", "New Tree");
window.onmousemove = function (e) {
  if (e.clientX >= 5 && e.clientX <= 135 && e.clientY >= 5 && e.clientY <= 55) {
    newTreeButton("gray", "New Tree");
  } else {
    newTreeButton("gainsboro", "New Tree");
  }
};
function newTreeButton(color, text, offset) {
  offset = offset || 0;
  ctx.lineWidth = 1;
  ctx.strokeStyle = "black";
  ctx.fillStyle = color;
  ctx.beginPath();
  ctx.rect(5, 5, 130, 50);
  ctx.fill();
  ctx.stroke();
  ctx.font = "bold 14pt sans-serif";
  ctx.fillStyle = "black";
  ctx.fillText(text, 25 + offset, 35);
  ctx.strokeStyle = "green";
}
window.onclick = function (e) {
  if (e.clientX >= 5 && e.clientX <= 135 && e.clientY >= 5 && e.clientY <= 55) {
    setTimeout(function () {
      ctx.fillStyle = "skyblue";
      ctx.lineWidth = 0;
      ctx.fillRect(0, 0, wid, hei);
      ctx.fillStyle = "limegreen";
      ctx.fillRect(0, hei - 20, wid, 20);
      newTreeButton("pink", "More nature...", -19);
      season = seasons[Math.floor(Math.random() * seasons.length)];
      setTimeout(function () {
        ctx.strokeStyle = "green";
        branch(
          wid / 2,
          5,
          15,
          100,
          20 + Math.random() * 5,
          15 + Math.floor(Math.random() * 5)
        );
        newTreeButton("gainsboro", "New Tree");
        checkFall();
      }, 20);
    }, 5);
  }
};

// class Particle {
//     constructor(x, y, c, s) {
//         this.x = x;
//         this.y = y;
//         this.vx = 0;
//         this.vy = 0;

//         this.s = s;
//         this.c = c;

//         this.sx = x;
//         this.sy = y;

//         this.time = Date.now();
//     }
//     update() {
//         this.x += this.vx;
//         this.y += this.vy;

//         this.vx = (this.sx - this.x) / 10;
//         this.vy = (this.sy - this.y) / 10;

//     }
//     render(context) {
//         context.beginPath();
//         context.fillStyle = this.c;
//         context.fillRect(this.x, this.y, this.s, this.s);
//         context.closePath();
//     }
// }
